<template>
  <div class="singerInfo">
    <div v-for="(item,index) in introduce" :key="index" class="singerItem">
      <p>{{item.ti}}</p>
      <div>{{item.txt}}</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import axios from '@/http'
import { useRoute } from 'vue-router'
onMounted(() => {
  getSingerInfo()
})
const route = useRoute()
const introduce = ref([])
const getSingerInfo = () => {
  const { id } = route.params
  axios
    .get('/artist/desc', {
      params: { id }
    })
    .then(res => {
      console.log(res)
      introduce.value = res.data.introduction
    })
}
</script>

<style scoped lang="scss">
.singerInfo {
  margin-top: 32px;
  .singerItem {
    p {
      color: #b2b2b2;
      font-weight: bolder;
    }
    div {
      color: #666;
      font-size: 13px;
      white-space: pre;
      line-height: 30px;
    }
  }
}
</style>